<template>
  <div class="authing-wx">
    <div v-if="isShowScan" class="scanStart">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="scanTabs">
        <el-tab-pane label="微信登录" name="ma">
          <el-image class="wx-image" :style="`width:${realWidth};height:${realHeight};`" :src="maCodeUrl"></el-image>
        </el-tab-pane>
        <el-tab-pane label="公众号登录" name="mp">
          <el-image class="wx-image" :style="`width:${realWidth};height:${realHeight};`" :src="qrcodeUrl"></el-image>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else class="scanResult">
      <h3>微信登录</h3>
      <el-result icon="success" title="扫码完成，请在手机上操作" subTitle="重新扫码，请">
        <template slot="extra">
          <el-button type="primary" size="medium" @click="toScanHandle">返回</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script>

const maCodeHttp = 'https://api-admin.minicps.com/authing/getCode/0?uniCode='
import qrcodeUrl from '@/assets/images/wechat/qrcode.jpg'
import { getAuthingMa } from '@/api/login'
export default {
  name: 'AuthingWx',
  data() {
    return {
      isShowScan: true,
      activeName: 'ma',
      maCodeUrl: '',
      qrcodeUrl: qrcodeUrl,
      timer: null,
      authInfo: {}
    };
  },
  props: {
    width: {
      type: [Number, String],
      default: '200px'
    },
    height: {
      type: [Number, String],
      default: '200px'
    }
  },
  computed:{
    realWidth() {
      return typeof this.width === 'string' ? this.width : `${this.width}px`
    },
    realHeight() {
      return typeof this.height === 'string' ? this.height : `${this.height}px`
    }
  },
  mounted(){
    this.maCodeUrl = maCodeHttp+'123456'
    // this.refresh()
  },
  methods:{
    handleClick(){

    },
    refresh(){
      this.timer = setTimeout(async () => {
          await this.refresh();
          this.checkAuthingMa(0,'123456')
      }, 5000) //设置五秒后刷新
    },
    checkAuthingMa(type,uniCode){
      getAuthingMa(type,uniCode).then(response => {
        let isLogin = response.data.login
        if(isLogin){
          clearInterval(this.timer);  // 清除定时器
          this.timer = null
          this.isShowScan = false
          this.$store.dispatch('WxMaScanLogin',response.data).then(() => {
            this.$router.push({ path: this.redirect || '/' }).catch(() => {})
          }).catch(() => {

          })
        }
      })
    }
    ,goBack(){

    }
    ,toScanHandle(){
      this.isShowScan = true
    }
  }
  ,destroyed() {
    console.log('销毁了。。。')
    clearInterval(this.timer);  // 清除定时器
    this.timer = null
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables.scss";
  .authing-wx{
    height: 400px;
    margin: 80px 0 0 0;
    padding: 5px 55px 5px 55px;
  }
  .scanStart{
    .wx-image{
      margin: 20px 65px auto 65px;
    }
  }
  .scanResult{
    width: 360px;
    height: 410px;
    h3 {
      padding: 50px 0 0 0;
      // margin: 20px 0 0 0;
      text-align: center;
    }

  }
</style>
